<template>
  <div>
    <shopping></shopping>
  <div class="Label">
    <div class="store--warp__scroll">
      <ul class="store--container">
        <router-link to="/auth/shopping/classification" class="order--li">
          <li @click="toggleRouterTo(0)" :style="{'color' :index === 0 ? '#2879e7' : '#000'}">
            推荐
          </li>
        </router-link>
        <router-link to="/auth/shopping/BeautyMakeup" class="order--li">
          <li @click="toggleRouterTo(1)" :style="{'color' :index === 1 ? '#2879e7' : '#000'}">
            美妆护肤
          </li>
        </router-link>
        <router-link to="/auth/shopping/goods" class="order--li">
          <li @click="toggleRouterTo(2)" :style="{'color' :index === 2 ? '#2879e7' : '#000'}">
            超值百货
          </li>
        </router-link>
        <router-link to="/auth/shopping/WristWatch" class="order--li">
          <li @click="toggleRouterTo(3)" :style="{'color' :index === 3 ? '#2879e7' : '#000'}">
            名品腕表
          </li>
        </router-link>
        <router-link to="/auth/shopping/household" class="order--li">
          <li @click="toggleRouterTo(4)" :style="{'color' :index === 4 ? '#2879e7' : '#000'}">
            品质家电
          </li>
        </router-link>
        <router-link to="/auth/shopping/Luggage" class="order--li">
          <li @click="toggleRouterTo(5)" :style="{'color' :index === 5 ? '#2879e7' : '#000'}">
            时尚箱包
          </li>
        </router-link>
        <router-link to="/auth/shopping/parts" class="order--li">
          <li @click="toggleRouterTo(6)" :style="{'color' :index === 6 ? '#2879e7' : '#000'}">
            精选配件
          </li>
        </router-link>
        <router-link to="/auth/shopping/Jewellery" class="order--li">
          <li @click="toggleRouterTo(7)" :style="{'color' :index === 7 ? '#2879e7' : '#000'}">
            黄金珠宝
          </li>
        </router-link>
        <router-link to="/auth/shopping/phone" class="order--li">
          <li @click="toggleRouterTo(8)" :style="{'color' :index === 8 ? '#2879e7' : '#000'}">
            手机
          </li>
        </router-link>
        <li :style="{left: index*20 + 'vw'}" class="slider--line"></li>
      </ul>
    </div>
  </div>
    <router-view></router-view>
  </div>
</template>

<script>
import shopping from '../components/shopping';
export default {
  name: "Choice",
  data() {
    return {
      index:0,
      bsl: null,
    }
  },
  methods: {
    // nav滚动
    toggleRouterTo(key) {
      this.index = key;
      if(key >= 2 && key <= 5){
        this.bsl.scrollTo((key - 2) * -100,0,200)
      }
    },
  },
  mounted(){
    this.bsl = new this.$BScroll('.store--warp__scroll', {
      scrollX: true,
      scrollY: false,
      click: true,
    });
  },
  components: {
    shopping,
  },
}
</script>

<style lang="scss" scoped>
  .store--warp__scroll{
    width: 100vw;
    height: 50px;
    background: #fff;
    margin-top: 1.2rem;
    position: fixed;
    z-index: 9;
    top: -10px;
    .store--container{
      padding: 0;
      list-style: none;
      width: 180vw;
      height: 65px;
      font-size: 0;
      position: relative;
      li{
        font-size: 14px;
        display: inline-block;
        width: 20vw;
        line-height: 40px;
        color: #666;
        text-align: center;
      }
      .active{
        color: #2879e7;
      }
      .slider--line{
        font-size: 14px;
        width: 20vw;
        height: 2px;
        border-radius: 1px;
        position: absolute;
        left: 0;
        bottom: .3rem;
        transition: all .4s ease-in-out;
        &::before{
          content: '';
          background: #2879e7;
          display: inline-block;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 3em;
          height: 3px;
        }
      }
    }
  }
</style>
